﻿<template>
    <section>



        <!--曲线图-->

        <el-scrollbar class="default-scrollbar"
                      wrap-class="default-scrollbar__wrap"
                      view-class="p20-scrollbar__view">
            <el-row :gutter="20">
                <el-col :span="24" class="echarts-item">
                    <div class="content-title" style="text-align:center">7天装载曲线图</div>
                    <ve-line :data="lineChartData7Day"
                             :extend="extend"
                             :settings="lineChartSettings7Day"
                             :mark-point="lineChartMarkPoint"></ve-line>
                </el-col>
            </el-row>
        </el-scrollbar>



        <!--列表-->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="150">
            </el-table-column>
            <el-table-column label="物料" style="width: 100%">
                <el-table-column prop="sum" label="总数" width="120">  </el-table-column>
                <el-table-column label="分类">

                    <el-table-column prop="clinker" label="熟料" width="120">  </el-table-column>
                    <el-table-column prop="BulkMaterial" label="散料" width="120">  </el-table-column>

                </el-table-column>
            </el-table-column>
        </el-table>




    </section>
</template>


<script>

    import Vue from "vue";
    import VCharts from "v-charts";
    Vue.use(VCharts);
    import { DTSNReport_AccessApiByDateAsync, DTSNReport_ReportDayWuLiao, getRequestApiinfoByWeek } from "../../../api/api";

    export default {
        name: "AdminDashboard",
        data() {
            return {
                histogramChartDataWeek: {
                    columns: [],
                    rows: []
                },
                extend: {
                    series: {
                        label: {
                            normal: {
                                show: true
                            }
                        }
                    }
                },
                histogramChartSettingsWeek: {},
                histogramChartMarkLine: {
                },
                lineChartData7Day: {
                    columns: [],
                    rows: []
                },
                lineChartSettings7Day: {
                    metrics: ["熟料", "散料"],
                    dimension: ["date"]
                },
                tableData: [],
                lineChartMarkPoint: {
                    data: [
                        {
                            name: "最大值",
                            type: "max"
                        },
                        {
                            name: "最小值",
                            type: "min"
                        }
                    ]
                },
            };
        },
        created: function () { },
        methods: {},
        mounted() {
            let para = {};
            //getAccessApiByDate DTSNReport_AccessApiByDateAsync
            DTSNReport_AccessApiByDateAsync(para).then(res => {
                this.lineChartData7Day = res.data;
            });

            DTSNReport_ReportDayWuLiao().then((res) => {
                //this.list_ShangWeiji = res.data.response;
                console.log(res.data);
                this.tableData = res.data.response
            });

        }
    };
</script>




<style scoped>
</style>